<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>New Password</title>
    <link rel="stylesheet" href="../../../script/semantic/semantic.css">
    <link rel="stylesheet" href="../../../script/ao.css">
    <script type="application/javascript" src="../../../script/jquery.min.js"></script>
    <script type="application/javascript" src="../../../script/semantic/semantic.js"></script>
    <style>

    </style>
</head>

<body>
    <br><br><br>
    <div class="ui container" align="center">
        <div class="ui basic segment" style="max-width:400px;" align="left">
            <div class="imageRight" align="center">
                <img class="ui small image" src="data:image/png;base64, {{vendor_logo}}"></img>
            </div>
            <div class="ui divider"></div>
            <div class="ui text container">
                <p>Hi {{display_name}}, Please set your local password.</p>
            </div>
            <div class="ui divider"></div>
            <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                <div class="ui divider"></div>
                <div class="field">
                    <label>New Password</label>
                    <input id="npw" type="password" name="newpw" placeholder="New Password">
                </div>
                <div class="field">
                    <label>Confirm New Password</label>
                    <input id="cpw" type="password" name="confirmnewpw" placeholder="Confirm New Password">
                </div>
                <button id="submitbtn" class="ui green button" type="submit">Submit</button>
            </form>
            <div id="errmsg" class="ui red inverted segment" style="display:none;">
                <i class="remove icon"></i> <span id="errtext">Internal Server Error</span>
            </div>
            <br>
            <p>Back to <a href="../../../ldapLogin.system">Login</a></p>
        </div>
    </div>

    <script>
        var username = "{{username}}";
        var key = "{{key}}";

        function handleFormSubmit(evt, obj) {
            evt.preventDefault();
            var newpw = obj.newpw.value;
            var cpw = obj.confirmnewpw.value;
            $("#npw").parent().removeClass("error");
            $("#cpw").parent().removeClass("error");

            if (newpw != cpw) {
                showErrorMessage("Confirm password does not match.")
                $("#cpw").parent().addClass("error");
                return
            }

            if (newpw == "" || cpw == "") {
                showErrorMessage("Password cannot be empty")
                $("#npw").parent().addClass("error");
            }

            //Should be OK now. Submit the form for reset password
            $.ajax({
                url: "../../../system/auth/ldap/setPassword",
                method: "POST",
                data: {
                    username: username,
                    password: newpw,
                    authkey: key,
                },
                success: function(data) {
                    if (data.error !== undefined) {
                        showErrorMessage(data.error);
                    } else {
                        //OK
                        window.location.href = "../../../";
                    }
                }
            })

        }

        function showErrorMessage(msg) {
            $("#errtext").text(msg);
            $("#errmsg").stop().finish().slideDown("fast");
        }
    </script>
</body>

</html>